<template>
  <page-view class="order">
    <page-header title="订单" :show-back="false"></page-header>
    <div class="content-box">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="-- 没有更多了 --"
        @load="onLoad"
      >
        <div
          class="order-item"
          v-for="orderItem in orderList"
          :key="orderItem.id"
        >
          <ul class="order-desc">
            <li><span>订单编号：</span>{{ orderItem.id }}</li>
            <li>
              <span>订单时间：</span
              >{{ formatDate(orderItem.submit_time, "YYYY-MM-DD HH:mm:ss") }}
            </li>
            <li><span>订单状态：</span></li>
            <li>
              <van-steps :active="orderItem.order_status">
                <van-step>未付款</van-step>
                <van-step>已付款</van-step>
                <van-step>已发货</van-step>
                <van-step>交易完成</van-step>
              </van-steps>
            </li>
            <li><span>订单列表：</span></li>
          </ul>
          <ul class="order-item-list">
            <li v-for="(item, index) in orderItem.orderDetailList" :key="index">
              <div class="left">
                <span>{{ index + 1 }}.</span>
                {{ item.food_name }} x {{ item.price }}
              </div>
              <div class="right">
                {{ item.count }}
              </div>
            </li>
            <li>
              <div class="left">
                <van-button
                  type="danger"
                  size="mini"
                  v-if="orderItem.order_status == 0"
                  @click="delOrder(orderItem.id)"
                  >取消订单</van-button
                >
              </div>
              <div class="right">
                <van-button
                  type="primary"
                  size="mini"
                  v-if="orderItem.order_status == 0"
                  @click="payMoney(orderItem.id)"
                  >付款</van-button
                >
                <van-button
                  type="primary"
                  size="mini"
                  v-else
                  @click="postComment(orderItem.id)"
                  >评论</van-button
                >
              </div>
            </li>
          </ul>
        </div>
      </van-list>
    </div>
  </page-view>
</template>

<script setup>
import { reactive, ref } from "vue";
import Api from "@/utils/api";
import { formatDate } from "@/filters/DateFilters";
import { Dialog, Toast, Notify } from "vant";
const loading = ref(false);
const finished = ref(false);
const totalPage = ref(0);
const pageIndex = ref(1);
const orderList = reactive([]);
const getOrder = async () => {
  loading.value = true;
  let results = await Api.orderInfo.findByUid(pageIndex.value);
  console.log(results);
  totalPage.value = results.totalPage;
  results.list.forEach((item) => orderList.push(item));
  loading.value = false;
  finished.value = pageIndex.value >= totalPage.value;
};
getOrder();

const onLoad = () => {
  if (pageIndex.value < totalPage.value) {
    pageIndex.value++;
    getOrder();
  }
};

const delOrder = async (id) => {
  Dialog.confirm({
    title: "系统",
    message: "确定要删除吗？",
  })
    .then(async () => {
      await Api.orderInfo.delete(id);
      let index = orderList.findIndex((item) => item.id == id);
      orderList.splice(index, 1);
    })
    .catch(() => {});
};
const payMoney = async (id) => {
  Notify({ type: "primary", message: "付款中..." });
  await Api.orderInfo.pay(id);
  setTimeout(() => {
    let index = orderList.findIndex((item) => item.id == id);
    orderList[index].order_status = 1;
    Toast.success("付款成功");
  }, 1000);
};
const postComment = async (id) => {};
</script>

<style lang="scss" scoped>
.order {
  .content-box {
    flex: 1;
    overflow: auto;
    .order-item {
      box-sizing: border-box;
      padding: 5px;
      margin-top: 5px;
      box-shadow: 0px 0px 10px lightgray;
      .order-desc {
        li {
          line-height: 1.8;
          span {
            font-weight: bold;
          }
        }
      }
      .order-item-list {
        > li {
          box-sizing: border-box;
          padding: 0px 5px;
          display: flex;
          justify-content: space-between;
          line-height: 1.8;
          .left {
            span {
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>